<template>
  <div class="dashboard-container">
    <div class="app-container">
      <!-- 组织架构的内容 头部 -->
      <el-card class="tree-card">
        <tree-tools :tree-node="company" :is-root="true" @addDepts="addDepts" />
        <!-- 树形展开结构 -->
        <el-tree :data="depts" :props="defaultProps">
          <tree-tools slot-scope="{ data }" :tree-node="data" @editDepts="editDepts" @addDepts="addDepts" @delDepts="getDepartments" />
        </el-tree>
      </el-card>
    </div>
     <add-tools ref="addDepts" :show-dialog.sync="showDialog" :tree-node="node" @addDepts="getDepartments" />
  </div>
</template>

<script>
import TreeTools from "./components/tree-tools";
import { getDepartments } from '@/api/departments';
import {tranListToTreeData} from '@/utils';
import  AddTools from './components/add-tools';
export default {
  components: {
    TreeTools,
    AddTools
  },
  data() {
    return {
      company: { },
      depts:[],
      node:null,
      showDialog:false,
      defaultProps: {
        children: "children",
        label: "name",
      },
    };
  }, 
  created(){
     this.getDepartments()
  },
   methods:{  
     async getDepartments(){
     const result= await getDepartments()
     this.company ={name:result.companyName,manager:'负责人',id:''}
     this.depts=  tranListToTreeData(result.depts,'')
    //  console.log(result);
     },
     addDepts(node) {
       this.showDialog= true 
       this.node=node  //记录当前点击的节点(新增)
     },
     editDepts(node){
      this.showDialog=true
      this.node=node //记录当前点击的节点(编辑)
      this.$refs.addDepts.getDepartDetail(node.id)
     }
   }
};
</script>

<style scope>
.tree-card {
  padding: 30px 140px;
  font-size: 14px;
}
</style>